<template>
    <div>
        <Row>
            <Card>
                <Icon type="md-information-circle"></Icon>
                官方消息
            </Card>
            <Card>
                <div style="display: flex;flex-direction: row-reverse">
                  <Button type="primary" @click="add" >新增</Button>
                </div>
                <div class="edittable-con-1 list" >
                    <Table border ref="selection" :columns="columns" :data="list"></Table>
                </div>
                <div style="text-align: center;margin-top: 20px">
                    <Page :current="pageId" :total="totalPage" :page-size="10" @on-change='search'></Page>
                </div>
            </Card>
        </Row>
    </div>
</template>

<script>
import  { getSystemMessageList, getSystemMessageDetail, editSystemMessage, delSystemMessage } from '@/api/sysMsg'

export default {
  name: 'sysMsg-list',
  data () {
    return {
      columns: [
        {
          title: '编号',
          align: 'center',
          key: 'id',
          width: 100
        },
        {
          title: '标题',
          align: 'center',
          key: 'title',
          width: 120
        },
        {
          title: '内容',
          align: 'center',
          key: 'content'
        },
        {
          title: '上次登录时间',
          align: 'center',
          key: 'updateTime',
          width: 180
        },
        {
          title: '创建时间',
          align: 'center',
          key: 'createTime',
          width: 180
        },
        {
          title: '操作',
          align: 'center',
          key: 'handle',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: { marginRight: '10px' },
                on: {
                  click: () => {
                    this.goDetail(params.row.id)
                  }
                }
              }, '查看详情'),
              h('Poptip', {
                props: {
                  confirm: true,
                  title: '您确定要删除这条数据吗?',
                  transfer: true
                },
                on: {
                  'on-ok': () => {
                    this.del(params.row.id)
                  }
                }
              }, [
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  }
                }, '删除')
              ])
            ])
          }
        }
      ],
      list: [],
      pageId: 1,
      totalPage: 10
    }
  },
  methods: {
    getList () {
      getSystemMessageList(this.searchObj).then(data => {
        data.data = data.data.map(function(item){
          item.content = item.content.replace(/<\/?.+?>/g,"")
          item.content = item.content.replace(/ /g,"")
          return item
        })
        this.list = data.data
        this.pageId = data.current_page
        this.totalPage = data.total
      })
    },
    add () {
      this.$router.push({
        name: 'sysMsg_detail'
      })
    },
    goDetail (id) {
      this.$router.push({
        name: 'sysMsg_detail',
        query: {
          id: id
        }
      })
    },
    // add() {
    //   this.$router.push({
    //     name: 'sysMsg_detail'
    //   })
    // },
    search () {
      if (arguments[0]) {
        this.searchObj.pageId = arguments[0]
      }
      this.getList()
    },
    // cancel () {
    //   this.searchObj = {
    //     id: '',
    //     label: '',
    //     pageId: 1
    //   },
    //     this.getList()
    // },
    del (id) {
      delSystemMessage(id).then(() => {
        this.$Message.success('删除成功')
        this.getList()
      })
    }
  },
  mounted () {
    this.getList()
  }
}
</script>

<style scoped>

</style>
